<template>
  <div class="fly-panel">
    <h3 class="fly-panel-title">温馨通道</h3>
    <div class="fly-panel-main layui-row">
      <div class="my-quick">
        <li class="layui-col-xs6" v-for="(item, index) in lists" :key="'tips' + index">
          <a :href="item.link" target="_blank">{{item.title}}</a>
        </li>
      </div>
    </div>
  </div>
</template>
<script>
import { getTips } from '@/api/content.js';

export default {
  name: 'Tips',
  data () {
    return {
      lists: [{ // 类型：Object  必有字段  备注：无
        'isTop': '0', // 类型：String  必有字段  备注：无
        'sort': '0', // 类型：String  必有字段  备注：无
        '_id': '5ce039cc5eb2b028bb7a61d9', // 类型：String  必有字段  备注：无
        'created': '2019-04-07T17:26:43.000Z', // 类型：String  必有字段  备注：无
        'title': '百度', // 类型：String  必有字段  备注：无
        'link': 'http://www.baidu.com', // 类型：String  必有字段  备注：无
        'type': 'links' // 类型：String  必有字段  备注：无
      },
      { // 类型：Object  必有字段  备注：无
        'isTop': '0', // 类型：String  必有字段  备注：无
        'sort': '0', // 类型：String  必有字段  备注：无
        '_id': '5ce039e35eb2b028bb7a61f3', // 类型：String  必有字段  备注：无
        'created': '2019-04-07T17:26:43.000Z', // 类型：String  必有字段  备注：无
        'title': '网易', // 类型：String  必有字段  备注：无
        'link': 'http://www.163.com', // 类型：String  必有字段  备注：无
        'type': 'links' // 类型：String  必有字段  备注：无
      },
      { // 类型：Object  必有字段  备注：无
        'isTop': '0', // 类型：String  必有字段  备注：无
        'sort': '0', // 类型：String  必有字段  备注：无
        '_id': '5ce039ed5eb2b028bb7a61f7', // 类型：String  必有字段  备注：无
        'created': '2019-04-07T17:26:43.000Z', // 类型：String  必有字段  备注：无
        'title': 'QQ', // 类型：String  必有字段  备注：无
        'link': 'http://www.qq.com', // 类型：String  必有字段  备注：无
        'type': 'links' // 类型：String  必有字段  备注：无
      },
      { // 类型：Object  必有字段  备注：无
        'isTop': '0', // 类型：String  必有字段  备注：无
        'sort': '0', // 类型：String  必有字段  备注：无
        '_id': '5ce039fa5eb2b028bb7a6203', // 类型：String  必有字段  备注：无
        'created': '2019-04-07T17:26:43.000Z', // 类型：String  必有字段  备注：无
        'title': 'github', // 类型：String  必有字段  备注：无
        'link': 'https://www.github.com', // 类型：String  必有字段  备注：无
        'type': 'links' // 类型：String  必有字段  备注：无
      },
      { // 类型：Object  必有字段  备注：无
        'isTop': '1', // 类型：String  必有字段  备注：无
        'sort': '0', // 类型：String  必有字段  备注：无
        '_id': '5ce03a0a5eb2b028bb7a620a', // 类型：String  必有字段  备注：无
        'created': '2019-04-07T17:26:43.000Z', // 类型：String  必有字段  备注：无
        'title': '慕课网', // 类型：String  必有字段  备注：无
        'link': 'https://www.imooc.com', // 类型：String  必有字段  备注：无
        'type': 'links' // 类型：String  必有字段  备注：无
      }]
    };
  },
  methods: {
    _getList () {
      getTips().then(res => {
        if (res.code === 200) {
          this.lists = res.data;
        }
        // else {
        //   this.$alert(res.msg);
        // }
      }).catch(err => {
        this.$alert(err);
      });
    }
  },
  mounted () {
    this._getList();
  }
};
</script>
<style scoped lang="scss">
$border-color: #f2f2f2;
.fly-panel-main {
  padding: 15px;
}
.my-quick {
    overflow: hidden;
    border-left: 1px solid $border-color;
    border-top: 1px solid $border-color;

    .layui-col-xs6 {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      border: 1px solid $border-color;
      border-left: none;
      border-top: none;
      text-align: center;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      a {
        display: block;
        cursor: pointer;
      }
    }
  }
</style>
